博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片...
阅读量:5256 次
发布时间:2019-06-14

本文共 909 字,大约阅读时间需要 3 分钟。

业务需求:

3个图片轮番播放,可以左右滑动,点击指示点可以切换图片 

index.wxml:

这里使用小程序提供的<swiper>组件

autoplay:自动播放
interval:自动切换时间
duration:滑动动画的时长
current:当前所在的页面
bindchange:current 改变时会触发 change 事件
由于<swiper>组件提供的指示点样式比较单一,另外再自定义指示点的样式

 

index.wxml :

{
{index+1}}

 

index.js:

data: {    swiperCurrent: 0  },    //轮播图的切换事件    swiperChange: function (e) {     console.log(e);     this.setData({      swiperCurrent: e.detail.current   //获取当前轮播图片的下标    })  },  //点击指示点切换    chuangEvent: function (e) {    this.setData({      swiperCurrent: e.currentTarget.id    })  },//获取图片在onload就可以进行。

 

运行:

 

转载于:https://www.cnblogs.com/xuzhengzong/p/8056262.html

你可能感兴趣的文章
普通求素数和线性筛素数
查看>>
PHP截取中英文混合字符
查看>>
【洛谷P1816 忠诚】线段树
查看>>
电子眼抓拍大解密
查看>>
poj 1331 Multiply
查看>>
tomcat7的数据库连接池tomcatjdbc的25个优势
查看>>
Html 小插件5 百度搜索代码2
查看>>
Ubuntu(虚拟机)下安装Qt5.5.1
查看>>
java.io.IOException: read failed, socket might closed or timeout, read ret: -1
查看>>
java 常用命令
查看>>
卷积中的参数
查看>>
51nod1076 (边双连通)
查看>>
Item 9: Avoid Conversion Operators in Your APIs(Effective C#)
查看>>
深入浅出JavaScript(2)—ECMAScript
查看>>
ViewPager的onPageChangeListener里面的一些方法参数:
查看>>
Jenkins关闭、重启,Jenkins服务的启动、停止方法。
查看>>
CF E2 - Array and Segments (Hard version) (线段树)
查看>>
Linux SPI总线和设备驱动架构之四:SPI数据传输的队列化
查看>>
SIGPIPE并产生一个信号处理
查看>>
CentOS
查看>>